<template>
  <div class="dashboard-editor-container">
    <div class="filter-container">
      <el-date-picker v-model="listQuery.date" type="monthrange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
      </el-date-picker>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>

    </div>
    <github-corner class="github-corner" />

    <merchant :merchant="merchant"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
           <pie-chart  :chart-data="pieChartData"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
           <count :count_list="count"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <money :money="money"/>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import GithubCorner from '@/components/GithubCorner'
import Merchant from './components/Merchant'
import LineChart from './components/LineChart'
import PieChart from './components/PieChart'
import Count from './components/Count'
import Money from './components/Money'
 import {
    getReportMerchantData
  } from '@/api/report'
const lineChartData = {
  newVisitis: {
    totalData: [],
    checkData: [],
    nocheckData: [],
    monthData: []
  },
}
const pieChartData = {
  newVisitis: {
    data: [],
    legend: []
  },
}
export default {
  name: 'DashboardAdmin',
  components: {
    GithubCorner,
    Merchant,
    LineChart,
    PieChart,
    Count,
    Money
  },
  data() {
    return {
      listQuery: {
        date: [],
      },
      pieChartData:pieChartData.newVisitis,
      merchant:[],
      count:[],
      money:[],
      lineChartData: lineChartData.newVisitis,
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 12);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    }
  },
  created() {
      let dt = new Date();
      dt.setDate(1)
      let start_time=dt.setMonth(dt.getMonth()-6)
      let end_time=dt.setMonth(dt.getMonth()+6)
      let end_month=new Date(end_time).getMonth()+1;
       let end= new Date(end_time).getFullYear()+"-"+ end_month
       let start_month=new Date(start_time).getMonth()+1;
       let start= new Date(start_time).getFullYear()+"-"+ start_month
      this.listQuery.date.push(start)
      this.listQuery.date.push(end)
    this.getReportMerchantData()
  },
  methods: {
    getReportMerchantData(){
           getReportMerchantData(this.listQuery).then(resp=>{
                 this.merchant=resp.data.merchant
                 this.lineChartData.totalData=resp.data.line.totalData
                 this.lineChartData.checkData=resp.data.line.checkData
                 this.lineChartData.nocheckData=resp.data.line.nocheckData
                 this.lineChartData.monthData=resp.data.line.monthData
                 this.pieChartData=resp.data.pie
                 this.count=resp.data.order_count
                 this.money=resp.data.order_total_money
                 console.log(this.count)
           })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    handleFilter(){
      this.getReportMerchantData()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
